<template>
  <div class="head">
    <div class="head-left">
      <el-image>
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline" />
        </div>
      </el-image>
      <span>一个专业教英语的地方</span>
    </div>
    <div class="head-right">
      <ul>
        <li>我的消息</li>
        <li>|</li>
        <li>我的收藏</li>
        <li>|</li>
        <li v-if="!name && !username"><router-link to="/login">请先登入</router-link></li>
        <li v-else-if="name">{{ name }}<span class="el-icon-user" /></li>
        <li v-else>{{ username }}<span class="el-icon-user" /></li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters({
      username: 'username',
      name: 'name'
    })
  }
}
</script>

<style lang="scss" scoped>
.head{

  min-width: 1200px;
  display: flex;
  height: 24px;
  justify-content: space-between;
  align-content: center;
  background-color:rgb(106,167,223);
    .head-left {
      padding: 0 2%;
        i{
          padding:5px 18px 0 0;
        }
        span{
          height: 100%;
          display: inline-block;
          margin-top:-20px;
          font-size: 12px;
          color: rgb(210, 210,210);
        }
    }
    .head-right{
      height: 100%;
      padding-right:18px;
      ul{
        color: #fff;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        // font-size: 13px;
        li{
        //  margin-top:2.5%;
         padding: 0 3px;
        }
      }
    }

}
</style>
